<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./vue.js"></script>
    <script>
      // const a = 'hello'+username
      // 'hi' + say()
      // 1<2?t:s

      /*
        在 {{}} ， v-html ， v-bind 中：
        - 变量后可以写什么，他们就可以写什么
        - return后可以写什么，他们就可以写什么
      */

      /*
       'Infinity,undefined,NaN,isFinite,isNaN,' +
      'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
      'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
      'require' 
      
      */

      const vm = new Vue({
        el: "#app",
        template: `
        <div>
          {{'hello '+username}}
          <hr>
          <span v-html="'hi ' + say()"></span>
          <hr>
          <input v-bind:type="1<2?t:s">
          <hr>
          {{username.length}}
          <hr>
          {{username.replace(/b/g,'*')}}
        </div>
        `,
        data: {
          username: "<b>jack</b>",
          t: "text",
          s: "checkbox",
        },
        methods: {
          say() {
            return this.username;
          },
        },
      });

      vm.age = 20;
    </script>
  </body>
</html>
